/**
 * 描述：树形结构下拉框实时获取数据，并初始化回填数据样式表
 * 公司：xxx有限公司
 * 版权：xxx2020
 * 作者：oyjl
 * 时间：2020-04-03 10:21:23
 */

$tree-theme-color: #ffffff; // 主体颜色
$tree-font-color: #55595c; // 字体颜色
$tree-conmon-border: 1px solid rgba(0, 0, 0, 0.15); // 公共边框颜色
$tree-main-height: 32px; // 树主体高度
$tree-main-min-height: 32px; // 树主体最小高度
$tree-main-min-width: 220px; // 树主体最小宽度
$tree-main-max-width: 400px; // 树主体最大宽度
$tree-list-max-height: 200px; // 树形结构最大高度

.tree-main {
  height: $tree-main-height;
  min-height: $tree-main-min-height;
  width: fit-content;
  min-width: $tree-main-min-width;
  max-width: $tree-main-max-width;
  position: relative;
  display: inline-block;
  background-color: $tree-theme-color;
  .tree-input {
    border: $tree-conmon-border;
    border-radius: 3px;
    width: inherit;
    min-width: inherit;
    max-width: inherit;
    height: inherit;
    display: flex;
    align-items: center;
    padding: 4px 0;
    label {
      width: 100%;
      margin: 8px 12px;
      color: $tree-font-color;
    }
    i {
      padding: 4px 8px;
    }
  }
  .tree-mask {
    background-color: rgba(248, 248, 248, 0.4);
    position: absolute;
    top: 0;
    border: 0;
  }
  .tree-list {
    border: $tree-conmon-border;
    border-top: 0;
    opacity: 0.9999;
    background-color: $tree-theme-color;
    width: inherit;
    min-width: inherit;
    max-width: inherit;
    label {
      margin: 4px 12px;
      color: $tree-font-color;
    }
  }
}

.tree-main-body {
  z-index: 1200;
  position: fixed;
  width: inherit;
}

// 修改树形内部组件的宽度为自动，背景为透明，便于使用主体的背景色
:host ::ng-deep {
  .ui-inputtext {
    background-color: $tree-theme-color;
  }
  .ui-chkbox .ui-chkbox-box {
    background-color: $tree-theme-color;
  }
  .ui-widget-content {
    background-color: $tree-theme-color;
  }
  .ui-state-disabled,
  body .ui-widget:disabled {
    display: none;
  }
  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler {
    width: auto;
    height: auto;
  }
  .p-tree-wrapper {
    max-height: $tree-list-max-height;
    overflow: auto;
  }
  .p-tree {
    border: 0;
  }
}
.ui-tree {
  width: auto;
}
